
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ninghtingale Chart</title>
		<script type="text/javascript" src="js/echarts.js" ></script>
	</head>
	<body>
		<div id="sales"  style="width:600px;height:400px"></div>
		<script>
			var myCharts=echarts.init(document.getElementById("sales"));
			var option={
				title:{
					text:'colourful roses',
					subtext:'show you',
					right:'center'
				},
				tooltip:{ 
					trigger: 'item',
   				    formatter: '{a} <br/>{b} : {c} ({d}%)'},
   				    
   				toolbox: {
			    show: true,
			    feature: {
			      mark: { show: true },
			      dataView: { show: true, readOnly: false },
			      restore: { show: true },
			      saveAsImage: { show: true }
			    }
			  },
				legend: {    //图例 
					    orient:"vertical",
					    left: 'left',  //居左对齐
					    top: 'bottom',
					    data: [
					      'rose1',
					      'rose2',
					      'rose3',
					      'rose4',
					      
					    ]
					 },
				series:[
				{
					name:'roses',
					type:'pie',
					radius:['40%','80%'],
					data:[ 
					{ value: 40, name: 'rose1' },
        			{ value: 33, name: 'rose2' },
        			{ value: 28, name: 'rose3' },
        			{ value: 22, name: 'rose4' },
				
				],
				
			}
				]
				};
				myCharts.setOption(option);   
		</script>
	</body>
</html>
